@import 'reset';
@import 'variables';
@import 'colors';
@import 'fonts';
@import 'mixins';


html {
    height:100%
}

body {
    height:              95%;
    color:               white;
    font:                14px 'Roboto Condensed', Arial;
    text-align:          center;
    background-color:    $greyDark;
    background-repeat:   no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size:     100%;

    h1 {
        margin-bottom:20px;
        font-size:2em;
        color:$blueLight;
    }
    h2 {
        font-size:1.5em;
        margin-bottom:10px;
        color:$grey;
    }
    h3 {
        font-size:1.2em;
    }

    p {
        margin-bottom:10px
    }

    a {
        color:$blueLight;
        text-decoration: underline;
        outline:none
    }
    a:hover{
        text-decoration: none
    }

    .left  {float:left}
    .right {float:right}

    .width-wrap {
        width:600px;
        margin-left:auto;
        margin-right:auto;
    }

    .span30p {width:30%}
    .span40p {width:40%}
    .span50p {width:50%}
    .span60p {width:60%}
    .span70p {width:70%}

    header {
        height:140px;
        width:100%;
        overflow:hidden;
        background:$black75;
        @include box-shadow(0, 0, 4px, black);

        .width-wrap {
            position:relative;
            padding:0 20px;

            #logo {
                position:absolute;
                left:0;
                top:10px;
            }
            > img {
                position:absolute;
                left:113px;
                top:99px
            }

            menu {
                position:absolute;
                width:auto;
                right:0;
                top:40px;
                list-style: none;
                font-size:18px;
                text-align:left;

                li {
                    display:inline-block;
                    
                    a {
                        text-decoration: none;
                        padding:4px 12px;
                        color:$white50
                    }
                }
                li.active a, li a:hover {
                    color:white
                }
            }
        }
    }



    #main {
        padding:20px;
        background:$white90;
        color:$greyLight2;
        margin-top:10px;
        text-align:left;
        @include box-shadow(0, 0, 3px, black);

        ul.photo-gallery {
            display:none
        }
    }

    form {
        label {
            display:block;
            margin-top:10px;
            cursor:pointer;
        }

        input[type=text],input[type=email], textarea {
            padding:2px 4px;
            font:16px 'Roboto Condensed', Arial;
            width:95%;
            resize:none
        }
        textarea {
            height:100px
        }

        .captcha {
            float:left;
            width:98%;
            margin:5px 0;

            input {
                display:inline-block;
                width:100px;
                text-align:center;
                float:left;
                clear:both;
            }
            img {
                float:left;
            }
        }

        .submit {
            float:left;
            clear:both;
            width:98%;
            margin-top:5px;
            height:50px;

            #flash-message {
                float:left;
                margin:7px 10px 0 0;

                >div {
                    padding:3px 6px;
                }
                .ok {
                    background:$greenDark;
                    color:white;
                }
                .error {
                    background:$redDark;
                    color:white;
                }
            }

            input {
                float:right;
                margin:5px 5px 0;
                color:white;
                cursor:pointer;
                border:none;
                padding:5px 10px;
                font-weight:bolder;
                @include box-shadow(1px, 1px, 3px, $greyDark);
                @include vertical-gradient($blueLight, $blue);
            }
            input:active {
                margin:7px -7px -7px 7px;
                @include box-shadow(0,0,0,transparent)
            }
        }
    }

    footer {
        position:fixed;
        height:5%;
        line-height:3em;
        left:0;
        bottom:0;
        font-size:0.8em;
        color:white;
        text-align:center;
        width:100%;
        background:$black30
    }
}

@import 'mobile'